<template>
  <div class="page-container">
    <Header />
    <div class="main-content">
      <!-- 轮播图和资讯部分 -->
      <div class="banner-news-section">
        <div class="banner-news-container">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="banner-section">
                <el-carousel height="400px">
                  <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
                    <img :src="image" class="carousel-image" :alt="`轮播图${index + 1}`" />
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="news-section">
                <h3 class="news-title">精选资讯</h3>
                <ul class="news-list">
                  <li v-for="(news, index) in featuredNews" :key="index" class="news-item">
                    <el-link :underline="false" @click="router.push('/information')">
                      {{ news.title }}
                    </el-link>
                    <span class="news-date">{{ news.date }}</span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 专业团队部分 -->
      <div class="team-section">
        <h2 class="section-title">专业团队</h2>
        <div class="team-cards">
          <el-row :gutter="20">
            <el-col :span="6" v-for="member in teamMembers" :key="member.name">
              <el-card class="team-card" :body-style="{ padding: '0' }">
                <img :src="member.avatar" class="team-avatar" />
                <h3>{{ member.name }}</h3>
                <p class="team-title">{{ member.title }}</p>
                <p class="team-description">{{ member.description }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 心理问答部分 -->
      <div class="qa-section">
        <h2 class="section-title">心理问答</h2>
        <div class="qa-cards">
          <el-row :gutter="20">
            <el-col :span="8" v-for="qa in qaList" :key="qa.id">
              <el-card class="qa-card" shadow="hover">
                <div class="qa-tag">{{ qa.tag }}</div>
                <h3 class="qa-question">{{ qa.question }}</h3>
                <p class="qa-brief">{{ qa.brief }}</p>
                <div class="qa-footer">
                  <span class="qa-info">
                    <el-icon><User /></el-icon>
                    匿名用户
                  </span>
                  <el-button type="primary" link @click="viewDetail(qa.id)">
                    查看详情
                    <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 心理测评部分 -->
      <div class="assessment-section">
        <h2 class="section-title">心理测评</h2>
        <div class="assessment-cards">
          <el-row :gutter="20">
            <el-col :span="6" v-for="test in assessmentList" :key="test.id">
              <el-card class="assessment-card" shadow="hover">
                <div class="assessment-icon">
                  <el-icon><component :is="test.icon" /></el-icon>
                </div>
                <h3 class="assessment-title">{{ test.title }}</h3>
                <p class="assessment-desc">{{ test.description }}</p>
                <div class="assessment-footer">
                  <span class="assessment-info">
                    <el-icon><Timer /></el-icon>
                    {{ test.duration }}分钟
                  </span>
                  <el-button type="primary" @click="startAssessment(test.id)">
                    开始测评
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Header from '../../components/header.vue'
import Footer from '../../components/footer.vue'
import { User, Message, Calendar, ArrowRight, Timer, Opportunity, Moon, Sunny, Star } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

// 修改轮播图图片导入
const carouselImages = [
  new URL('../../assets/slideshow/1.jpg', import.meta.url).href,
  new URL('../../assets/slideshow/2.jpg', import.meta.url).href,
  new URL('../../assets/slideshow/3.jpg', import.meta.url).href,
  new URL('../../assets/slideshow/4.jpg', import.meta.url).href,
  new URL('../../assets/slideshow/5.jpg', import.meta.url).href
]

const services = ref([
  {
    icon: 'User',
    title: '个人咨询',
    description: '一对一专业心理咨询服务，为您提供个性化的心理支持'
  },
  {
    icon: 'Message',
    title: '在线咨询',
    description: '便捷的线上咨询服务，随时随地解决您的心理困扰'
  },
  {
    icon: 'Calendar',
    title: '心理测评',
    description: '专业的心理测评工具，帮助您更好地了解自己'
  }
])

const teamMembers = ref([
  {
    avatar: '../../assets/images/avatar1.jpg',
    name: '张医生',
    title: '资深心理咨询师',
    description: '从业15年，擅长处理情感问题'
  },
  {
    avatar: '../../assets/images/avatar2.jpg',
    name: '李医生',
    title: '心理治疗师',
    description: '擅长处理抑郁、焦虑等问题'
  },
  {
    avatar: '../../assets/images/avatar3.jpg',
    name: '王医生',
    title: '心理咨询师',
    description: '专注青少年心理健康'
  },
  {
    avatar: '../../assets/images/avatar4.jpg',
    name: '赵医生',
    title: '心理辅导员',
    description: '擅长婚姻家庭咨询'
  }
])

// 添加精选资讯数据
const featuredNews = ref([
  {
    title: '如何缓解考试焦虑？专家支招',
    date: '2024-01-15',
    link: '#'
  },
  {
    title: '心理健康科普：认识抑郁症',
    date: '2024-01-14',
    link: '#'
  },
  {
    title: '青少年心理健康教育指南',
    date: '2024-01-13',
    link: '#'
  },
  {
    title: '职场压力管理：从心开始',
    date: '2024-01-12',
    link: '#'
  },
  {
    title: '家庭关系调适技巧分享',
    date: '2024-01-11',
    link: '#'
  }
])

const router = useRouter()

// 心理问答数据
const qaList = ref([
  {
    id: 1,
    tag: '情感困扰',
    question: '如何克服社交恐惧？',
    brief: '我总是在社交场合感到紧张和不安，害怕与人交流，这严重影响了我的生活和工作...',
  },
  {
    id: 2,
    tag: '学业压力',
    question: '考试焦虑该如何调节？',
    brief: '临近期末考试，我经常失眠，总是担心考试成绩，感觉压力很大...',
  },
  {
    id: 3,
    tag: '家庭关系',
    question: '如何改善亲子关系？',
    brief: '我和孩子的沟通总是出现问题，经常发生争执，不知道该如何与青春期的孩子相处...',
  }
])

// 查看详情方法
const viewDetail = (id: number) => {
  router.push({
    path: `/qa/detail/${id}`
  })
}

// 添加心理测评数据
const assessmentList = ref([
  {
    id: 1,
    icon: 'Opportunity',
    title: 'SCL-90症状自评量表',
    description: '全面评估个人的心理健康状况，包含90个项目的自评问卷',
    duration: 20
  },
  {
    id: 2,
    icon: 'Moon',
    title: '抑郁自评量表(SDS)',
    description: '评估个人是否存在抑郁倾向，帮助及早发现情绪问题',
    duration: 10
  },
  {
    id: 3,
    icon: 'Sunny',
    title: '焦虑自评量表(SAS)',
    description: '评估个人的焦虑水平，了解自己的心理状态',
    duration: 10
  },
  {
    id: 4,
    icon: 'Star',
    title: '人格特质测评',
    description: '了解个人性格特点，提供个性化的心理建议',
    duration: 15
  }
])

// 开始测评方法
const startAssessment = (id: number) => {
  router.push({
    path: `/assessment/${id}`
  })
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  width: 1400px;
  margin: 84px auto 40px;
  padding: 0 20px;
}

.banner-news-section {
  background-color: #f5f7fa;
  padding: 20px;
}

.banner-news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner-section {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 400px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-section {
  background: white;
  padding: 20px;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.news-title {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409EFF;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item .el-link {
  color: #2c3e50;
  font-size: 14px;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item .el-link:hover {
  color: #409EFF;
}

.news-date {
  color: #909399;
  font-size: 12px;
}

/* 调整轮播图样式 */
:deep(.el-carousel__container) {
  height: 400px;
}

.section-title {
  text-align: center;
  margin: 40px 0;
  font-size: 28px;
  color: #2c3e50;
  font-weight: bold;
}

.service-section,
.team-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.service-card {
  text-align: center;
  padding: 30px;
  transition: transform 0.3s;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  color: #2c3e50;
  margin: 15px 0;
}

.service-card p {
  color: #666;
  line-height: 1.6;
}

.team-card {
  text-align: center;
  padding: 20px;
  transition: transform 0.3s;
  cursor: pointer;
}

.team-card:hover {
  transform: translateY(-5px);
}

.team-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 15px auto;
  object-fit: cover;
}

.team-card h3 {
  font-size: 18px;
  color: #2c3e50;
  margin: 10px 0;
}

.team-title {
  color: #409EFF;
  font-size: 14px;
  margin: 5px 0;
}

.team-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  padding: 0 15px;
}

.qa-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.qa-cards {
  margin-top: 30px;
}

.qa-card {
  height: 250px;
  position: relative;
  transition: all 0.3s;
}

.qa-card:hover {
  transform: translateY(-5px);
}

.qa-tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: #ecf5ff;
  color: #409EFF;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 12px;
}

.qa-question {
  font-size: 18px;
  color: #2c3e50;
  margin: 10px 0;
  line-height: 1.4;
}

.qa-brief {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.qa-footer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qa-info {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.qa-info .el-icon {
  margin-right: 4px;
}

.el-button.is-link {
  font-size: 14px;
}

.el-button.is-link:hover {
  text-decoration: none;
}

.assessment-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #fff;
}

.assessment-cards {
  margin-top: 30px;
}

.assessment-card {
  height: 280px;
  position: relative;
  transition: all 0.3s;
  padding: 20px;
}

.assessment-card:hover {
  transform: translateY(-5px);
}

.assessment-icon {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 20px;
  text-align: center;
}

.assessment-title {
  font-size: 18px;
  color: #2c3e50;
  margin: 15px 0;
  text-align: center;
}

.assessment-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: center;
}

.assessment-footer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assessment-info {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.assessment-info .el-icon {
  margin-right: 4px;
}
</style>